﻿@model DAMS.Web.Areas.Manage.Models.CategoryCreateViewModel

@{
    ViewData["Title"] = "创建分类";
}
@section Stylesheets {
    <link href="~/lib/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="~/lib/editor/kindeditor-all.js"></script>
    
}
<span class="font-weight-bold text-success">新建分类</span>
<hr />
<form asp-action="CreateCategory" id="form1" method="post">

    <div class="form-group form-row">
        <label asp-for="Name" class="col-2 text-right col-form-label"></label>
        <div class="col-4"><input asp-for="Name" class="form-control" /></div>
        <span asp-validation-for="Name" class="text-danger form-text"></span>
    </div>
    <div class="form-group form-row">
        <label class="col-2 text-right col-form-label" asp-for="ParentID"></label>
        <div class="col-4"><span id="selectPan" class="form-control custom-select" style="cursor:default;background-color:#fff;">请选择父分类</span></div>
        <input type="hidden" asp-for="ParentID" />
        <span asp-validation-for="ParentID" class="text-danger form-text"></span>
    </div>
    <div class="form-group form-row">
        <label asp-for="Type" class="col-2 text-right col-form-label"></label>
        <div class="col-4 form-check form-check-inline mr-0">
            @foreach (var item in Html.GetEnumSelectList<DAMS.Models.CategoryType>(28))
            {
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" asp-for="Type" id="@("Type" + item.Value)" value="@item.Value">
                    <label class="form-check-label" for="@("Type" + item.Value)">@item.Text</label>
                </div>
            }
        </div>
        <span asp-validation-for="Type" class="text-danger form-text"></span>
    </div>
    <div class="form-group form-row">
        <label class="col-2 text-right col-form-label" asp-for="Template"></label>
        <div class="col-4 form-inline">
            <input asp-for="Template" type="text" class="form-control" />
            <select class="form-control form-inline" id="TemplateList"></select>
            <span asp-validation-for="Template" class="text-danger form-text"></span>
        </div>
    </div>
    <div class="form-group form-row">
        <label class="col-2 text-right col-form-label" asp-for="ArticleTemplate"></label>
        <div class="col-4 form-inline">
            <input asp-for="ArticleTemplate" type="text" class="form-control" />
            <select class="form-control form-inline" id="ArticleTemplateList"></select>
            <span asp-validation-for="ArticleTemplate" class="text-danger form-text"></span>
        </div>
    </div>
    <div class="form-group form-row">
        <label class="col-2 text-right col-form-label" asp-for="HtmlDescription"></label>
        <div class="col-6">
            <input asp-for="HtmlDescription" type="text" class="form-control" />
        </div>
        <span asp-validation-for="HtmlDescription" class="text-danger form-text"></span>
    </div>
    <div class="form-group form-row">
        <label class="col-2 text-right col-form-label" asp-for="HtmlKeyWord"></label>
        <div class="col-6 ">
            <input asp-for="HtmlKeyWord" type="text" class="form-control" />

        </div>
        <span asp-validation-for="HtmlKeyWord" class="text-danger form-text"></span>
    </div>
    <div class="form-group form-row">
        <label asp-for="ShowType" class="col-2 text-right col-form-label"></label>
        <div class="col-9 form-check form-check-inline">

            @foreach (var item in Html.GetEnumSelectList<DAMS.Models.CategoryShowType>())
            {
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="@("ShowType" + item.Value)" name="ShowType" value="@item.Value">
                    <label class="form-check-label" for="@("ShowType" + item.Value)">@item.Text</label>
                </div>
            }
        </div>
    </div>
    <div class="form-group form-row">
        <label asp-for="Content" class="col-2 text-right col-form-label"></label>
        <div class="col-10">
            <textarea asp-for="Content" style="width:90%;"></textarea>
        </div>
    </div>
    <div class="form-group form-row">
        <label class="col-2 text-right col-form-label"></label>
        <div class="col-4 ">
            <input type="submit" value="添加" class="btn btn-primary w-25" />

        </div>

    </div>

    

    <div id="catetoryTree" class="ztree" style="position:absolute; display:none; background-color:#fff; border:1px solid #c2c2c2;max-height:300px;overflow-y:scroll; overflow-x:auto;"></div>

</form>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="~/lib/zTree/js/jquery.ztree.all.js"></script>
    <script>
        function eachJson(node) {
            switch (node.type) {
                case 1:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/11.png";
                    node.name = "顶层分类";
                    break;
                case 2:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/1_open.png";
                    break;
                case 4:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/10.png";
                    break;
                case 8:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/2.png";
                    break;
                case 16:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/12.png";
                    break;
            }
            if (node.children != null) {
                for (var i = 0; i < node.children.length; i++) {
                    eachJson(node.children[i]);
                }
            }
        }

        $(document).ready(function () {
            var json =@Html.Raw(Model.TreeJson);
            eachJson(json);
            var templates=@Html.Raw(Model.TemplatesJson);
            zTreeObj = $.fn.zTree.init($("#catetoryTree"), {
                callback: {
                    beforeClick: function (treeId, treeNode, clickFlag) {
                        //Tree点击事件，将点击节点的上级节点路径显示在上级分类名称里，并格式化显示
                        //将当前选择节点分类ID作为新建分类上级分类ID，放入隐藏字段ParentID，
                        //隐藏Tree，并对隐藏字段进行数据验证。

                        switch (treeNode.type) {
                            case 2://首页
                                return false;
                            case 4:
                                $("#Type8").prop('disabled', true);
                                $("#Type16").prop('disabled', true);
                                $("#Type4").prop('checked', true).prop('disabled', false).change();
                                break;
                            case 8:
                                $("#Type4").prop('disabled', true);
                                $("#Type16").prop('disabled',false);
                                $("#Type8").prop('checked', true).prop('disabled', false).change();
                                break;
                            case 16:
                                return false;
                            case 1:
                                $("#Type8").prop('disabled', false);
                                $("#Type16").prop('disabled', false);
                                $("#Type4").prop('checked', true).prop('disabled', false).change();
                                break;
                        }

                        $('#ParentID').val(treeNode.id);
                        var arr = new Array();
                        $(treeNode.getPath()).each(function (index, el) {
                            arr.push(el.name);
                        })
                        $('#selectPan').html(arr.join("<span style='color:red;font-weight:bold;'> › </span>"));
                        $('#catetoryTree').hide();
                        $("#form1").validate().element($("#ParentID"));//对隐藏字段单独验证

                        return true;
                    }
                },
                view: {
                    autoCancelSelected: false,
                    selectedMulti: false
                }
            }, json);
            zTreeObj.expandAll(true);

            $("body").mousedown(function (event) {//页面点击事件，是否在tree或选择框，否则隐藏tree
                if (!(event.target.id == "catetoryTree" || event.target.id == "selectPan" || $(event.target).parents("#catetoryTree").length > 0)) {
                    $('#catetoryTree').hide();
                }
            })
            $("#selectPan").click(function () {//点击选择框显示Tree
                var cityOffset = $("#selectPan").offset();
                var height = $("#selectPan").outerHeight();
                var width = $("#selectPan").outerWidth();
                $("#catetoryTree").css({ left: cityOffset.left + "px", top: cityOffset.top + (height -1) + "px", width: width + "px" });
                $("#catetoryTree").slideToggle("fast");
            });
            $(":radio[name='Type']").change(function () {//类型选择事件
                var typeid = $("input[name='Type']:checked").val();
                $("#Template").val("");
                switch (typeid) {
                    case '4':
                        $("#TemplateList").html("<option value=''>请选择列表页模板</option><option>" + templates.list.join("</option><option>") + "</option>").prop('disabled', false);
                        $("#ArticleTemplateList").html("<option value=''>请选择内容页模板</option><option>" + templates.article.join("</option><option>") + "</option>");
                        $("#ArticleTemplate").prop('disabled', false).prop('readonly', true);
                        $("#Template").prop('readonly', true);
                        $("#ArticleTemplateList").prop('disabled', false);
                        editor.readonly(false);
                        break;
                    case '8':
                        $("#TemplateList").html("<option value=''>请选择单页模板</option><option>" + templates.page.join("</option><option>") + "</option>").prop('disabled', false);
                        $("#ArticleTemplate").prop('disabled', true);
                        $("#ArticleTemplateList").prop('disabled', true);
                        $("#Template").prop('readonly', true);
                        editor.readonly(false);
                        break;
                    case '16':
                        $("#TemplateList").prop('disabled', true);
                        $("#Template").prop('readonly', false);
                        $("#ArticleTemplate").prop('disabled', true)
                        $("#ArticleTemplateList").prop('disabled', true);
                        editor.readonly();
                        break;
                }
            })
            $("#TemplateList").change(function () {
                $("#Template").val($("#TemplateList").val());
            });
            $("#ArticleTemplateList").change(function () {
                $("#ArticleTemplate").val($("#ArticleTemplateList").val());
            })

            //解除对hidden的不验证设置，并重新绑定验证。
            $.validator.setDefaults({
                ignore: ''
            });
            $("form").removeData("validator").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse($("form"));
            var options = {
                //cssPath: '/css/index.css',
                filterMode: true,
                minHeight: 300,
                themeType: 'default',
                uploadJson: '/Manage/Home/UpLoadFile',
                fileManagerJson: '/Manage/Home/UpLoadFileManage',
                allowFileManager: true
            };
            var editor = KindEditor.create('#Content',options);
        })

    </script>
}


